<template>
    <!-- 边距公共组建 -->
    <div class="margin-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="paddingGroupName=!paddingGroupName">
                <i class="group-icon" :class="paddingGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span v-text="groupName"/>
            </li>
            <ul class="inner-box" :class="{'h0': !paddingGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">顶</div>
                    <div class="block">
                        <el-slider
                            v-model="padding.top"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input>
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">右</div>
                    <div class="block">
                        <el-slider
                            v-model="padding.right"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input>
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">下</div>
                    <div class="block">
                        <el-slider
                            v-model="padding.bottom"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input>
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">左</div>
                    <div class="block">
                        <el-slider
                            v-model="padding.left"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input>
                        </el-slider>
                    </div>
                </li>
            </ul>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'YXPadding',
        props: {
            groupName: {
                type: String,
                default: '边距'
            },
            padding: {
                type: Object,
                default: _ => {
                    return {
                        top: 10,
                        right: 10,
                        bottom: 10,
                        left: 10
                    };
                }
            }
        },
        data() {
            return {
                paddingGroupName: true
            };
        }
    }
</script>

<style scoped lang="scss">
    @import '../../../../styles/init';

    .margin-box {
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .group-attribute-name {
            height: 20px;
            width: fit-content;
            user-select: none;
            color: #999;
            cursor: pointer;

            .group-icon {
                font-size: 18px;
            }
        }
        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .inner-box {
                height: 192px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    height: 38px;
                    display: flex;
                    overflow: hidden;
                    margin-top: 10px;

                    .attr-item-label {
                        padding-right: 29px;
                        line-height: 38px;
                    }
                    .block {
                        width: calc(100% - 43px);
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .margin-box {
        .outer-box {
            .inner-box {
                .attr-item {
                    .el-slider__input.el-input-number--mini {
                        width: 52px;
                    }
                    .el-slider__runway {
                        width: 166px;
                    }
                }
            }
        }
    }
</style>
